<template>
 <div class="demo1">
     <span :title="message">加载时间:  {{message}}</span>
     <span v-if="seen">现在你看到我了</span>
     <button @click="setShow" value="选择">选择</button>
     <h3>---------------------------------------</h3>
     <p>{{mess}}</p>
     <button @click="reverseMessage">逆转消息</button>
     <h3>---------------------------------------</h3>
     <button @click="show = !show">Togle</button>
     <transition name= "fade"><p v-if="show">hello</p></transition>
 </div>
</template>

<script>
export default {
 props: {

 },
 data() {
 return {
     message:'',
    mess:"123456789"
    ,seen :true
    ,show:true
 }; 
 },
 computed: {

 },
 created() {

 },
 mounted() {
     this.message = new Date().toLocaleString()
 },
 watch: {

 },
 methods: {
     setShow:function () {
         this.seen = !this.seen
     },
     reverseMessage:function () {
         this.mess = this.mess.split('').reverse().join()
     }
 },
 components: {

 },
};
</script>

<style lang='less'>
.fade-enter-active, .fade-leave-active {
    transition:opacity .5s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}
</style>
